<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TableDemo</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		
	</head>
	<body>
		<!--基本表格到条纹状表格、带边框表格、鼠标悬停、紧缩表格、状态类和响应式表格-->
		<!--<div class="container">-->
			<!--表格的响应式-->
		<div class="table-responsive">
			<!--
				其他表格只需在class 中添加样式即可 table-striped 斑马线 table-bordered 边框
				table-hover :鼠标悬停
				 table-condensed:紧凑型
				table-striped table-bordered table-hover
				
				总共有5中状态:
				active  success info warning danger
			--> 
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>表格标题</th>
						<th>表格标题</th>
						<th>表格标题</th>
					</tr>
				</thead>
				<tbody>
					<tr class="active">
						<th>表格单元格</th>
						<th>表格单元格</th>
						<th>表格单元格</th>
					</tr>
					<tr class="success">
						<th>表格单元格</th>
						<th>表格单元格</th>
						<th>表格单元格</th>
					</tr>
					<tr class="info">
						<th>表格单元格</th>
						<th>表格单元格</th>
						<th>表格单元格</th>
					</tr>
					<tr class="warning">
						<th>表格单元格</th>
						<th>表格单元格</th>
						<th>表格单元格</th>
					</tr>
					<tr class="danger">
						<th>表格单元格</th>
						<th>表格单元格</th>
						<th>表格单元格</th>
					</tr>
					<tr>
						<th>表格单元格</th>
						<th>表格单元格</th>
						<th>表格单元格</th>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>
